<!--
*  2022-03-11
*  成品移区
-->
<template>
  <div id="app" class="store-change">
    <van-nav-bar
        title="成品移区"
        ref="header"
        left-text="返回"
        left-arrow
        @click-left="clickLeft"
        @click-right="clickRight"
    >
      <template #right>
        <van-icon name="scan" size="20" />
      </template>
    </van-nav-bar>

    <!-- 总计 -->
    <van-cell
        title="总匹数"
        :value="tableData.length"
        class="store-change__cell"
    ></van-cell>
    <van-cell
        title="默认区域"
        is-link
        :value="defaultArea"
        @click="showAreaPickerPopup(0)"
    ></van-cell>

    <!-- 滚动 -->
    <better-scroll
        class="public-scroll"
        :data="tableData"
        :totalPage="totalPage"
    >
      <van-cell-group v-show="tableData.length !== 0">
        <van-swipe-cell v-for="(data, index) in tableData" :key="index">
<!--          <template>
            <van-row>
              <van-col span="12">
                <van-cell title="品号" :value="data.topNo"></van-cell>
              </van-col>
              <van-col span="12">
                <van-cell v-show="data.color" title="色号" :value="data.color"></van-cell>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="12">
                <van-cell title="匹号" :value="data.designSeqNo"></van-cell>
              </van-col>
              <van-col span="12">
                <van-cell v-show="data.dyeSeqNo" title="缸号" :value="data.dyeSeqNo"></van-cell>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="8">
                <van-cell title="门幅" :value="data.width"></van-cell>
              </van-col>
              <van-col span="8">
                <van-cell title="长度" :value="data.length"></van-cell>
              </van-col>
              <van-col span="8">
                <van-cell title="重量" :value="data.weight"></van-cell>
              </van-col>
            </van-row>
          </template>-->
          <van-cell :title="'品号: ' + data.topNo">
            <template slot="label">
              <div class="store-change">
                <span>
                  <span>色号: </span><van-field readonly :value="data.color"/></span>
                <span>
                  <span>匹号: </span><van-field readonly :value="data.designSeqNo"/></span>
                <span>
                  <span>重量: </span><van-field readonly :value="data.weight"/></span>
                <span>
                  <span>长度: </span><van-field readonly :value="data.length"/>
                </span>
                <span>
                  <span>区域:</span>
                  <van-field
                      readonly
                      clickable
                      name="picker"
                      :value="data.area"
                      placeholder="点击选择"
                      @click="showAreaPickerPopup(index, 1)"
                  />
                </span>
              </div>
            </template>
          </van-cell>

          <template #right>
            <van-button
                square
                type="danger"
                text="删除"
                @click="removeScanned(index)"
            />
          </template>
        </van-swipe-cell>
      </van-cell-group>
      <van-empty
          image="network"
          v-show="tableData.length === 0"
          description="暂无数据"
      />
    </better-scroll>

    <van-cell-group
        class="store-change-btn"
        v-show="tableData.length !== 0"
    >
      <van-button block type="info" class="bgColor" @click="confirmChange"
      >确认移区</van-button
      >
    </van-cell-group>

    <!-- 区域picker -->
    <van-popup v-model="showAreaPicker" position="bottom">
      <van-picker
          show-toolbar
          :columns="areaColumns"
          @confirm="confirmArea"
          @cancel="showAreaPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {comeBack} from "@/utils";
import {getByType} from "@/api/yarn";
import {getClothNoteScan} from "@/api/product";
import Vue from 'vue';
import { Col, Row } from 'vant';
import {productStoreChangeArea} from "@/api/cloth";
Vue.use(Col);
Vue.use(Row);

export default {
  name: "productChangeArea",
  data() {
    return {
      title: "成品移区",
      currentPage: 1,
      totalPage: 1,
      tableData: [],
      defaultArea: "",
      curAreaIndex: 0,
      showAreaPicker: false,
      areaColumns: []
    }
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      }
    }
  },
  methods: {
    //初始化
    initFn(that) {
      that.initArea();
      window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });
    },
    //导航左键
    clickLeft() {
      comeBack();
    },
    //导航右边
    clickRight() {
      this.openFNScanner();
    },
    //打开摄像头
    openFNScanner() {
      const that = this;
      const zyHmsScan = api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          let content = ret.result;
          if (content.indexOf(",") != -1) {
            that.$toast.fail("请扫成品二维码");
            return false;
          }
          if (content.indexOf("http://") != -1) {
            content = content.slice(content.lastIndexOf("/")+1, content.length);
          }
          let params = {};    //geryClothId greyClothId 坑 还故意?
          if(content.indexOf("?") != -1) {
            params.flag = 1;
            params.geryClothId = parseInt(content.slice(0, content.indexOf("?")));
          } else {
            params.geryClothId = parseInt(content);
          }
          getClothNoteScan(params, (res) => {
            if(that.tableData.findIndex((item) => item.id === res.id) != -1) {
              that.$toast.fail("重复扫码");
              return false;
            }
            res.area = that.defaultArea;
            that.tableData.push(res);
            that.openFNScanner();
          });
        }
      });
    },
    //初始化区域
    initArea() {
      let that = this;
      getByType({
        pageSize: 1000,
        type: 16
      }, (res) => {
        this.defaultArea = res.list[0].propertyValue;
        res.list.forEach((item) => {
          that.areaColumns.push(item.propertyValue);
        })
      });
    },
    //弹出区域选择框
    showAreaPickerPopup(index, flag) {
      this.showAreaPicker = true;
      if(1 == flag) {
        this.curAreaIndex = parseInt(index);
      } else {
        this.curAreaIndex = -1;
      }
    },
    //确认选中区域
    confirmArea(value) {
      if(this.curAreaIndex === -1) {    //默认区域
        this.defaultArea = value;
      } else {
        this.tableData[this.curAreaIndex].area = value;
      }
      this.showAreaPicker = false;
    },
    //移除扫码的
    removeScanned(index) {
      this.tableData.splice(index, 1);
    },
    //确认移区
    confirmChange() {
      let result = this.tableData.every((item) => {
        item.clothId = item.id;
        return item.area != "";
      });
      if (!result) {
        this.$toast.fail("请选择区域");
        return;
      }
      productStoreChangeArea(this.tableData, () => {
        this.$toast({
          type: "success",
          message: "区域设置成功",
          onClose: () => {
            comeBack()
          },
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.store-change {
  width: 100%;
  height: 100%;
  .van-nav-bar__title {
    .van-button {
      height: 36px;
      line-height: 36px;
    }
  }
  .store-change__cell {
    .van-cell__title {
      flex: 0 0 67%;
      display: flex;
      justify-content: space-between;
      span,
      .van-cell__label {
        display: flex;
        flex: 1;
      }
      .van-cell__label {
        justify-content: center;
      }
    }
    .van-cell__value {
      flex: 0 0 33%;
    }
    span,
    .van-cell__label {
      font-weight: 900;
      color: #96b327;
      font-size: 14px;
    }
  }
  .public-scroll {
    width: 100%;
    height: calc(100vh - 234px);
    overflow: hidden;
    .store-change {
      display: flex;
      flex-wrap: wrap;
      padding-top: 0;
      & > span {
        display: flex;
        width: 50%;
        height: 30px;
        align-items: center;
        & > span {
          width: 100px;
        }
        .van-cell.van-field {
          padding-left: 0;
        }
      }
    }
  }
  .store-change-btn {
    padding: 16px;
    &.van-hairline--top-bottom::after,
    .van-hairline-unset--top-bottom::after {
      border-width: 0;
    }
  }
  .van-swipe-cell__right {
    .van-button {
      height: 100%;
    }
  }
}
</style>